<template>
  <div class="home">
    <div class="top-bar" style="padding:0 7px;">
      <div
        class="user-bar-item"
        v-for="(item, index) in topItemData"
        :style="{ backgroundColor: item.leftColor }"
        :key="index"
      >
        <a
          href="javascript:void(0)"
          style="text-decoration:none;"
          @click="gotoList(item.linkUrl, item.linkType)"
        >
          <div class="item-content">
            <span class="item-label">{{ item.label }}</span>
            <span class="item-label-value">{{ item.value }}</span>
          </div>
          <div class="item-icon" :style="{ backgroundColor: item.rightColor }">
            <img :src="item.icon" />
          </div>
        </a>
      </div>
    </div>
    <div style="padding:0 15px; " v-has="permissionCharts">
      <div id="myChart" :style="{ width: '100%', height: '420px' }"></div>
      <div class="charts-horizontal">
        <div
          style="background: #ffffff; margin-top: 15px; padding-top: 20px; box-sizing: border-box; flex: 1"
        >
          <p style="margin-left: 25px; color: #333333 ">
            全国省份业绩占比(本月)
          </p>
          <div
            style="width: 500px; height: 1px; background: #ececec; text-align: center; margin: auto"
          ></div>
          <div id="myPie" :style="{ width: '500px', height: '250px' }"></div>
        </div>

        <div style="width: 20px"></div>

        <div
          style="background: #ffffff; margin-top: 15px; padding-top: 20px; box-sizing: border-box; flex: 1"
        >
          <p style="margin-left: 25px; color: #333333 ">城市业绩排行榜(本月)</p>
          <div
            style="width: 500px; height: 1px; background: #ececec; text-align: center; margin: auto"
          ></div>
          <div style="padding-left: 10px">
            <div
              class="rank-item"
              v-for="(item, index) in rankData"
              :key="index"
            >
              <span style="color: #94d64d">{{ index + 1 }}</span>
              <span style="margin-left: 20px; color: #999999">{{
                item.statCity
              }}</span>
              <div
                style="flex: 1; justify-content: flex-end; display: flex; padding-right: 40px; color: #999999"
              >
                <span>{{ item.statValue }}元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="!getPermission(permissionCharts)"
      style="width: 100%; text-align: center; margin-top: 100px"
    >
      <img src="../assets/img/pic_default.png" />
      <p style="font-size: 22px">欢迎使用康来生物诊断报告单打印系统</p>
    </div>
    <!--消息语音 -->

    <audio
      style="visibility: hidden"
      controls
      :src="radioUrlOvertime"
      ref="audioOpenOvertime"
    ></audio>
  </div>
</template>

<script>
import echarts from "echarts";
import { setStorage, getStorage } from "@/utils/auth";
import * as stn from "../constants/storeName";
import ReportApi from "@/api/report/report";
import AppointApi from "@/api/appoint/appoint";

export default {
  data() {
    return {
      radioOvertime: true,
      radioUrlOvertime: "",
      userType: "",
      topItemData: [
        {
          leftColor: "#f2b532",
          rightColor: "#e9a920",
          label: "未打印报告单", //待处理报告单（医检）
          value: 0,
          linkUrl: "/report/ReportManagement",
          linkType: 1,
          icon: require("../assets/img/icon_yonghu.png")
        },
        {
          leftColor: "#94d64d",
          rightColor: "#87cd3c",
          label: "今日新增报告单",
          value: 0,
          linkUrl: "/report/ReportManagement",
          linkType: 2,
          icon: require("../assets/img/icon_dailishang.png")
        },
        {
          leftColor: "#54e6e8",
          rightColor: "#41d9db",
          label: "未打印预约单", //待处理预约单（医检）
          value: 0,
          linkUrl: "/appoint/AppointManagement",
          linkType: 1,
          icon: require("../assets/img/icon_jigou.png")
        },
        {
          leftColor: "#be85eb",
          rightColor: "#b070e2",
          label: "今日新增预约单",
          value: 0,
          linkUrl: "/appoint/AppointManagement",
          linkType: 2,
          icon: require("../assets/img/icon_yisheng.png")
        }
      ],
      dayData: [],
      rankData: [],
      pieStringData: [],
      pieValueData: [],
      permissionCharts: "SYSTEM_MANAGER_HOME_HOME_DISPLAY"
    };
  },
  components: {},
  methods: {
    startPlay() {
      this.$refs.audioOpenOvertime.play();
    },
    drawLine(dayData) {
      let myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}(元)"
        },
        xAxis: {
          //x轴
          type: "category",
          data: [
            "01日",
            "02日",
            "03日",
            "04日",
            "05日",
            "06日",
            "07日",
            "08日",
            "09日",
            "10日",
            "11日",
            "12日",
            "13日",
            "14日",
            "15日",
            "16日",
            "17日",
            "18日",
            "19日",
            "20日",
            "21日",
            "22日",
            "23日",
            "24日",
            "25日",
            "26日",
            "27日",
            "28日",
            "29日",
            "30日",
            "31日"
          ], //x轴的数据
          splitLine: { show: false }, //去除网格分割线
          // splitArea: {show: true},//保留网格区域
          axisLine: {
            //坐标线
            lineStyle: {
              type: "solid",
              color: "#d8d8d8", //轴线的颜色
              width: "1" //坐标线的宽度
            }
          },
          axisTick: {
            //刻度
            show: false //不显示刻度线
          },
          axisLabel: {
            textStyle: {
              color: "#878787" //坐标值的具体的颜色
            }
          },
          splitLine: {
            show: false //去掉分割线
          }
        },
        backgroundColor: "#fff", //图得背景色
        yAxis: {
          name: "销售额(本月)", //轴的名字，默认位置在y轴上方显示
          align: "left",
          type: "value",
          axisLine: {
            //线
            show: false
          },
          axisTick: {
            //刻度
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#878787" //坐标值得具体的颜色
            }
          },
          minInterval: 5, //标值的最小间隔
          splitLine: {
            lineStyle: {
              color: ["#f6f6f6"] //分割线的颜色
            }
          }
        },
        series: [
          {
            name: "销售额", //每组数据的名字，与图例对应
            data: dayData, //数据
            type: "bar", //柱状图
            itemStyle: {
              normal: {
                color: "#e87a7c", //设置柱子颜色
                label: {
                  // show: true,//柱子上显示值
                  position: "top", //值在柱子上方显示
                  textStyle: {
                    color: "#e87a7c" //值得颜色
                  }
                }
              }
            },
            barWidth: 30 //设置柱子宽度，单位为px
          }
        ]
      };
      myChart.setOption(option); //设置option
    },
    drawPie(statData, statValue) {
      let myChart = echarts.init(document.getElementById("myPie"));
      var _zr = myChart.getZr();
      _zr.add(
        new echarts.graphic.Text({
          style: {
            x: _zr.getWidth() / 2,
            y: _zr.getHeight() / 2,
            color: "#666",
            //text: '业绩占比',
            textAlign: "center",
            textFont: "17px verdana"
          }
        })
      );
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}(元) ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          align: "left",
          data: statData
        },
        backgroundColor: "#fff", //图得背景色
        series: [
          {
            name: "全国省份业绩占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: statValue
          }
        ]
      };
      myChart.setOption(option);
    },
    getReportAccount() {
      ReportApi.getReportCounts({}).then(res => {
        this.topItemData[0].value = res.data.counts;
        this.topItemData[1].value = res.data.newCount;
        if (this.userType === "author") {
          this.topItemData[0].value = res.data.waitCount;
          this.topItemData[0].label = "待处理报告单";
        }
      });
    },
    getAppointCount() {
      AppointApi.getAppointCounts({}).then(res => {
        this.topItemData[2].value = res.data.counts;
        this.topItemData[3].value = res.data.newCount;
        if (this.userType === "author") {
          this.topItemData[2].value = res.data.waitCount;
          this.topItemData[2].label = "待处理预约单";
        }
      });
    },
    closeNotify() {
      setStorage("isNotify", "true");
    },
    gotoList(linkUrl, linkType) {
      this.$router.push({ path: linkUrl, query: { linkType: linkType } });
    },
    getPermission(value) {
      let isExist = false;
      let btnPermissionsStr = getStorage(stn.MENUS_PERMISSION);
      if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
        return false;
      }
      if (btnPermissionsStr.indexOf(value) > -1) {
        isExist = true;
      }
      return isExist;
    },
    socketMessage(data) {
      var _this = this;
      var msg = data.msg;
      var source = data.source;
      //【102报告单/202预约/401采样】
      //其他：
      //100~199 跳转报告单
      //200~399 跳转预约
      //400~499 跳转采样
      //500~599 跳转收样
      //600~699 跳转标本箱
      if (source >= 100 && source <= 199) source = 100;
      if (source >= 200 && source <= 399) source = 200;
      if (source >= 300 && source <= 499) source = 400;
      if (source >= 500 && source <= 599) source = 500;
      if (source >= 600 && source <= 699) source = 600;
      switch (source) {
        //报告
        case 100:
          _this.$notify.info({
            title: msg,
            message: "点击处理",
            onClick: function() {
              _this.$router.push({ path: "/report/reportManagement" });
              _this.$notify.closeAll();
            },
            duration: 300000
          });
          _this.report();
          break;
        //预约
        case 200:
          _this.$notify.info({
            title: msg,
            message: "点击处理",
            onClick: function() {
              _this.$router.push({ path: "/appoint/appointManagement" });
              _this.$notify.closeAll();
            },
            duration: 300000
          });
          _this.subscribe();
          break;
        //采样
        case 400:
          _this.$notify.info({
            title: msg,
            message: "点击处理",
            onClick: function() {
              _this.$router.push({ path: "/sample/sampleApplyManagement" });
              _this.$notify.closeAll();
            },
            duration: 300000
          });
          _this.samplingPayment();
          break;
        //收样
        case 500:
          _this.$notify.info({
            title: msg,
            message: "点击处理",
            onClick: function() {
              _this.$router.push({ path: "/collect/collectHospManagement" });
              _this.$notify.closeAll();
            },
            duration: 300000
          });
          _this.samplingPayment();
          break;
        //标本箱
        case 600:
          _this.$notify.info({
            title: msg,
            message: "点击处理",
            onClick: function() {
              _this.$router.push({ path: "/equip/specimenManagement" });
              _this.$notify.closeAll();
            },
            duration: 300000
          });
          _this.overtimeTemperature();
          break;
        //其他
        default:
          // this.radioUrlOvertime = '../static/audio/overtime_temperature.mp3'
          _this.$notify.info({
            title: msg,
            onClick: function() {
              this.$notify.closeAll();
            },
            duration: 3000
          });
          _this.msgDingdong();
          break;
      }
    }
  },

  created() {
    let token = localStorage.getItem("isToken");
    let istokenOne = localStorage.getItem("istokenOne");
    this.socket.emit("client", token); //刷新传token
    if (istokenOne != "1") {
      this.socket.emit("token", token); // 触发socket连接发送token
      localStorage.setItem("istokenOne", "1");
    }
    // 一定要移除旧的message监听，否则会出现重复监听的状况
    this.socket.removeListener("message");
    this.socket.on("message", data => {
      console.log("Socket-消息：", data);
      this.socketMessage(data);
    });
  },
  mounted() {
    let userInfo = getStorage(stn.USER_INFO);
    if (userInfo) {
      if (userInfo.userRole == 1) {
        this.userType = "system"; // 系统用户
      } else if (userInfo.userRole == 2) {
        this.userType = "doctor"; // 医生用户
      } else if (userInfo.userRole == 3) {
        this.userType = "author"; // 医检用户
      }
    }
    this.getReportAccount();
    this.getAppointCount(); /*this.$notify({
            title: '公告',
            dangerouslyUseHTMLString: true,
            message: '<img style="width: 700px;height: 500px" src="https://image.kanglailab.com/vacation.png">'
          });*/
    /*this.$notify({
        title: '公告',
        dangerouslyUseHTMLString: true,
        message: '<img style="width: 700px;height: 500px" src="https://image.kanglailab.com/vacation.png">'
      });*/
    /*let isNotify = sessionStorage.getItem("isNotify");
      if (isNotify == 'false'){
        this.$message({
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: '<img style="width: 500px;height: 700px" src="http://image.kanglailab.com/vacations.png">',
          onClose: this.closeNotify()
        });
      }*/

    /*h('div', { style: 'width:200px;height:192px;background-image:url('+require('../../assets/img/program/tipImg.png')+')'})*/
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  padding-top: 15px;
  flex-direction: column;
}
.top-bar {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
}
.user-bar-item {
  position: relative;
  width: calc(25% - 16px);
  height: 100px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  flex-direction: row;
  margin: 0 8px;
  background: #f2b532;
  border-radius: 5px;
}
.item-content {
  width: 190px;
  display: flex;
  box-sizing: border-box;
  padding-left: 15px;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: flex-start;
}

.item-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: #e9a920;
  display: flex;
  display: -webkit-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.item-label {
  color: #ffffff;
  font-size: 16px;
}

.item-label-value {
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
}
.charts-horizontal {
  display: flex;
  width: 100%;
  display: -webkit-flex;
  flex-direction: row;
  box-sizing: border-box;
}
.rank-item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 14px;
}
</style>
